<template>
  <div class="able-model">
    <div class="gird-el" v-for="(item, index) in ableList" :key="index" :style="{
      gridColumn: item.col,
      gridRow: item.row,
    }" @mouseenter="mouseEnterHandler(index)" @mouseleave="mouseLeaveHandler(index)">
      <div class="el">
        <img :src="item.url" alt="">
        <div class="el-mask" v-show="item.showBtn"></div>

        <div class="el-box"
          style="background-color: rgba(140, 140, 140, 0.2);"
        >
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span class="el-type">{{ item.type }}</span>
        </div>

        <AbleTemplate>
          <div class="el-msg animate__animated animate__fadeInUp" v-show="item.showBtn">
            <p>{{ item.msg }}</p>
            <el-button round color="none">
              了解更多 ->
            </el-button>
          </div>
        </AbleTemplate>
      </div>

    </div>
  </div>

</template>
<script setup lang="ts">
  import AbleTemplate from '@/components/ableModle/AbleTemplate.vue';

  import {
    Tickets,
    DataAnalysis,
    MostlyCloudy,
    ForkSpoon,
    Service,
    Cpu,
    Setting,
    Guide,
    CreditCard,
    Grape,
    Box
  } from '@element-plus/icons-vue';
  import { markRaw, ref } from 'vue';

  const ableList = ref([
    {

      type: '人力资源解决方案',
      icon: markRaw(Tickets),
      url: '/public/ables/09141737fita.jpg',
      msg: '提供人力资源解决方案，包括人力资源管理、薪酬管理、绩效管理、...',
      col: '1',
      row: '1 / 3',
      showBtn: false,
    },
    {
      type: '大数据',
      icon: markRaw(DataAnalysis),
      url: '/public/ables/30152936nv46.png',
      msg: '大数据时代，数据工程师的核心竞争力是数据分析能力。',
      col: '2 / 3',
      row: '1',
      showBtn: false,

    },
    {
      type: '云解决方案',
      icon: markRaw(MostlyCloudy),
      url: '/public/ables/211533278ksn.jpg',
      msg: '基于近20年来积累的各行各业解决方案和成熟的服务经验，深入剖析不同行业的需求特征...',
      col: '3 / 5',
      row: '1',
      showBtn: false,

    },
    {
      type: 'Cloud云管家',
      icon: markRaw(ForkSpoon),
      url: '/public/ables/21153530vbzv.jpg',
      msg: 'CloudEasy云管家是一款基于云计算的企业级运维管理平台，提供完整的运维管理解决方案...',
      col: '2 / 4',
      row: '2 / 3',
      showBtn: false,

    },
    {
      type: '咨询服务',
      icon: markRaw(Service),
      url: '/public/ables/21153801qiid.jpg',
      msg: '提供专业的咨询服务，包括系统架构设计、技术选型、性能优化、安全防护、...',
      col: '4 / 5',
      row: '2 / 3',
      showBtn: false,

    },
    {
      type: '应用开发',
      icon: markRaw(Cpu),
      url: '/public/ables/21153852xy40.jpg',
      msg: '提供应用开发服务，包括Web开发、移动开发、后台开发、数据库开发、...',
      col: '1',
      row: '3 / 4',
      showBtn: false,

    },
    {
      type: '管理服务',
      icon: markRaw(Setting),
      url: '/public/ables/211539433e3u.jpg',
      msg: '提供管理服务，包括团队管理、项目管理、HR管理、财务管理、...',
      col: '2 / 3',
      row: '3 / 4',
      showBtn: false,

    },
    {
      type: '产品工程',
      icon: markRaw(Guide),
      url: '/public/ables/211540377x4x.jpg',
      msg: '提供产品工程服务，包括产品设计、产品运营、产品推广、产品迭代、...',
      col: '3 / 4',
      row: '3 / 4',
      showBtn: false,

    },
    {
      type: '测试服务',
      icon: markRaw(CreditCard),
      url: '/public/ables/30161538ruga.jpg',
      msg: '提供测试服务，包括单元测试、集成测试、UI测试、API测试、...',
      col: '4 / 5',
      row: '3 / 5',
      showBtn: false,
    },
    {
      type: '软件平台',
      icon: markRaw(Grape),
      url: '/public/ables/21154236i375.jpg',
      msg: '提供软件平台服务，包括云平台、企业级软件、ERP软件、...',
      col: '1',
      row: '4 / 5',
      showBtn: false,
    },
    {
      type: '业务流程外包',
      icon: markRaw(Box),
      url: '/public/ables/21154336kq7s.jpg',
      msg: '提供业务流程外包服务，包括流程设计、流程审批、流程执行、...',
      col: '2 / 4',
      row: '4 / 5',
      showBtn: false,
    },
  ])


  const mouseEnterHandler = async (index: number) => {
    ableList.value[index].showBtn = true
  }

  const mouseLeaveHandler = (index: number) => {
    ableList.value[index].showBtn = false
  }


</script>
<style scoped>

  .able-model {
    padding: 80px 0;
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    grid-auto-rows: 250px;
    grid-gap: 20px;
    justify-content: center;
    align-items: center;

      /* hover 动态效果 */
    .gird-el:hover {
      > .el {
        position: relative;
               width: 100%;
          height: 100%;



        > .el-box {
          position: absolute;
          > .el-icon {
            transition: all 0.3s ease;
            top: 20%;
            left: 40px;
          }
          > .el-type {
            transition: all 0.3s ease;
            top: 20%;
            left: calc(40px + 80px);
          }
        }

        > .el-msg {
          position: absolute;
          top: 40%;
          left: 50%;
          translate: -50%;
        }
      }
    }


    .gird-el {
      width: 100%;
      height: 100%;

      position: relative;
      border-radius: 10px;
      overflow: hidden;
      .el {
        width: 100%;
        height: 100%;
        /* 绝对定位到 grid-el 中心*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        > img {
          position: absolute;
        }

        > .el-mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(119, 51, 51, 0.8);

        }

        .el-msg {
          color: aliceblue;
          width: 80%;
          .el-button {
            float: right;
          }
        }

        .el-box {
          /* 定位父级 */
          width: 100%;
          height: 100%;
          position: relative;
          color: aliceblue;

          .el-icon {
            transition: all 0.3s ease;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 42px;
          }

          .el-type {
            transition: all 0.3s ease;
            position: absolute;
            top: calc(40% + 48px);
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            height: 24px;
            text-align: center;
          }
        }
      }
    }
  }

</style>
